<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="话题ID:" prop="tag_id" v-show="false">
                    <el-input-number v-model="form.tag_id" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="话题类型:" prop="tag_type">
                    <el-select v-model="form.tag_type" placeholder="请选择话题类型" clearable>
                        <el-option v-for="(item, index) in tag_type" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="话题内容:" prop="tag_content">
                    <el-input v-model="form.tag_content" placeholder="请输入话题内容" clearable />
                </el-form-item>
                <el-form-item label="所属用户:" prop="user_id">
                    <SelectPage v-model="form.user_id" :url="'/admin/user/selectPage'" placeholder="请选择所属用户"
                                show_field="nickname" show_id="uid" query_field="uid" :multiple="false" />
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="创建时间:" prop="created_at" v-if="disabled">
                            <el-date-picker v-model="form.created_at" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择创建时间" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="更新时间:" prop="updated_at" v-if="disabled">
                            <el-date-picker v-model="form.updated_at" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择更新时间" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="动态数量:" prop="post_num" v-if="disabled">
                            <el-input-number v-model="form.post_num" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户数:" prop="user_num" v-if="disabled">
                            <el-input-number v-model="form.user_num" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="浏览次数:" prop="view_num" v-if="disabled">
                            <el-input-number v-model="form.view_num" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="点赞数:" prop="zan_num" v-if="disabled">
                            <el-input-number v-model="form.zan_num" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评论数:" prop="comment_num" v-if="disabled">
                            <el-input-number v-model="form.comment_num" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="评论回复数:" prop="comment_reply_num" v-if="disabled">
                            <el-input-number v-model="form.comment_reply_num" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序:" prop="sortweight">
                            <el-input-number v-model="form.sortweight" :step="1" :min="0"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                // tag_id: [{ required: true, message: "请输入话题ID", trigger: "blur" }],
                tag_content: [{ required: true, message: "请输入话题内容", trigger: "blur" }],
                // max_hot_content: [{ required: true, message: "请输入用户最后一次发布内容", trigger: "blur" }],
                // user_id: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
                // created_at: [{ required: true, message: "请输入创建时间", trigger: "blur" }],
                // updated_at: [{ required: true, message: "请输入更新时间", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态", trigger: "blur" }],
                // post_num: [{ required: true, message: "请输入动态数量", trigger: "blur" }],
                // user_num: [{ required: true, message: "请输入用户数", trigger: "blur" }],
                // view_num: [{ required: true, message: "请输入浏览次数", trigger: "blur" }],
                // deleted_at: [{ required: true, message: "请输入删除时间", trigger: "blur" }],
                // zan_num: [{ required: true, message: "请输入点赞数", trigger: "blur" }],
                // comment_num: [{ required: true, message: "请输入评论数", trigger: "blur" }],
                // comment_reply_num: [{ required: true, message: "请输入评论回复数", trigger: "blur" }],
                // sortweight_score: [{ required: true, message: "请输入话题排名积分", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            tag_type:[
               { label: "公共", value: 0 },
               { label: "记经期", value: 1 },
               { label: "备孕", value: 2 },
               { label: "怀孕", value: 3 },
               { label: "宝宝", value: 4 },
            ],
            status:[
               { label: "通过", value: 'Y' },
               { label: "未通过", value: 'N' },
               { label: "审核中", value: 'C' },
            ],
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
